<template>
  <div class="app-container">
    <!-- 列表搜索 -->
    <el-form
      ref="queryForm"
      :model="new_queryParam"
      size="small"
      :inline="true"
      label-width="80px"
    >
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
          <div class="left-search">
            <el-button type="primary" size="mini" @click="important">
              导入
            </el-button>
            <el-button type="primary" size="mini" @click="deleteA">
              删除所选
            </el-button>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
          <div class="right-search">
            <el-form-item label="档案搜索" prop="name">
              <el-input
                v-model="new_queryParam.name"
                placeholder="请输入档案名称"
                clearable
                style="width: 100%"
                @keyup.enter.native="onSearch"
                @clear="onSearch"
              />
            </el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="emptsearch">
              重置
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-card>
      <div v-if="data" v-loading="tableLoading" class="tab_box">
        <XgmTable
          ref="artistTable"
          :selection="true"
          :columns.sync="columnsShow"
          :is-set-up="false"
          :data="data"
          @selectionChange="selectionChange"
          @sortChange="sortChange"
        >
          <!-- 高亮表头 -->
          <template
            v-for="(prop, i) in redTable"
            :slot="`header-${prop}`"
            slot-scope="{ label }"
          >
            <span :key="i">
              <span style="color: red">{{ label }}</span>
            </span>
          </template>

          <template slot="firstFileType" slot-scope="{ scope }">
            {{ firstFileType[scope.row.firstFileType] }}
            {{ secondFileType[scope.row.secondFileType] }}
          </template>

          <template slot="source" slot-scope="{ scope }">
            {{ source[scope.row.source] }}
          </template>

          <template slot="firstSystem" slot-scope="{ scope }">
            {{ firstSystem[scope.row.firstSystem] }}
            {{ secondSystem[scope.row.secondSystem] }}
          </template>

          <template slot="contentsId" slot-scope="{ scope }">
            {{ filterPath(scope.row.contentsId) }}
          </template>

          <template slot="edit" slot-scope="{ scope }">
            <div class="edit-box">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="review(scope.row)"
              >
                预览
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-s-tools"
                @click="setF(scope.row)"
              >
                设置
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-s-promotion"
                @click="saveF(scope.row)"
              >
                归档
              </el-button>
            </div>
          </template>
        </XgmTable>
      </div>
      <div class="page-footer">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pagination.page"
          :page-size="pagination.pageSize"
          :page-sizes="pagination.pageSizeS"
          :total="pagination.total"
          @current-change="
            (e) => {
              pagination.page = e
              getList()
            }
          "
        ></el-pagination>
      </div>
    </el-card>
    <review ref="reviewRef" @load="onSearch">
      <p></p>
    </review>

    <setd ref="setRef" @load="onSearch">
      <p></p>
    </setd>

    <importDoctor ref="importDoctor" @load="onSearch"></importDoctor>
  </div>
</template>
<script>
  let columns = [
    {
      label: '数据ID',
      prop: 'archivesId',
      fixed: 'left',
      showOverflowTooltip: true,
    },
    {
      label: '电子文件名',
      prop: 'fileName',
      showOverflowTooltip: true,
    },
    {
      label: 'MD5',
      prop: 'md5',
      showOverflowTooltip: true,
    },
    {
      label: '统一文件类型',
      prop: 'firstFileType',
      showOverflowTooltip: true,
    },
    {
      label: '统一来源标识',
      prop: 'source',
      showOverflowTooltip: true,
    },
    {
      label: '统一系统标识',
      prop: 'firstSystem',
      showOverflowTooltip: true,
    },
    {
      label: '创建者',
      prop: 'createBy',
      showOverflowTooltip: true,
    },
    {
      label: '创建日期',
      prop: 'createTime',
      showOverflowTooltip: true,
    },

    {
      label: '操作',
      prop: 'edit',
      width: '200',
      fixed: 'right',
      forbid: true,
    },
  ]

  import {
    firstFileType,
    secondFileType,
    source,
    firstSystem,
    secondSystem,
  } from '@/utils/enum.js'
  import { delDurg } from '@/api/interHospital/drug.js'
  import { handRule, depCategoryList, archivesDel } from '@/api/dep/index.js'
  import XgmTable from '@/components/XgmTable'
  export default {
    name: 'RecommendList',
    components: {
      XgmTable,
      importDoctor: () => import('./importDoctor.vue'),
      review: () => import('./review.vue'),
      setd: () => import('./set.vue'),
    },
    props: {},
    data () {
      return {
        data: [],
        columns,
        redTable: [],
        pagination: {
          total: 0,
          page: 1,
          pageSize: 10, //每页中显示10条数据
          pageSizeS: [5, 10, 20],
          showTotal: (total) => `共有 ${total} 条数据`,
        },
        // 新的筛选项
        new_queryParam: {
          name: '',
        },
        sort: {
          order_type: 'desc', // 'desc ,
          order_key: 'update_time',
        },
        tableLoading: false,
        options: [],
        firstFileType,
        secondFileType,
        source,
        firstSystem,
        secondSystem,
        classList: [],
      }
    },
    computed: {
      columnsShow: {
        get () {
          return this.columns
        },
        set (val) {
          this.exportColumns = val.filter((item) => item.prop != 'edit')
        },
      },
      orderBy () {
        return {
          [this.sort.order_key]: this.sort.order_type,
        }
      },
    },
    watch: {},
    created () {
      this.getClassList()
      this.getList()
    },
    methods: {
      filterPath (id) {
        let array = this.findParents(this.classList, id, [])
        if (array && array.length) {
          return array.join(',')
        } else {
          return ''
        }
      },
      findParents (treeData, childId, parents = []) {
        for (let i = 0; i < treeData.length; i++) {
          const node = treeData[i]
          if (node.id === childId) {
            // 找到了目标子节点，返回其所有父节点id
            return [...parents, node.name]
          } else if (node.childList && node.childList.length > 0) {
            // 递归遍历子节点的所有子节点
            const result = this.findParents(node.childList, childId, [
              ...parents,
              node.id,
            ])
            if (result) {
              // 找到了目标子节点，返回其所有父节点id
              return result
            }
          }
        }
        // 没有找到目标子节点
        return null
      },
      async getClassList () {
        let data = await depCategoryList()
        this.classList = data.result
      },
      important () {
        this.$refs.importDoctor.handleImport(
          '档案导入',
          '/durglib/importTemplate',
          'durglib/importData'
        )
      },
      saveF () {
        console.log('归档')
      },

      deleteA (row) {
        this.$confirm('是否确定所选档案?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            try {
              let params = {
                id: row.id,
              }
              await archivesDel(params)
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              setTimeout(() => {
                this.getList()
              }, 500)
            } catch (error) {
              this.loading = false
            }
          })
          .catch(() => {})
      },
      review () {
        this.$refs.reviewRef.applynewadd()
      },
      setF () {
        this.$refs.setRef.applynewadd()
      },
      async getList (id) {
        this.tableLoading = true
        let params = {
          page: this.pagination.page,
          size: this.pagination.pageSize,
          ...this.new_queryParam,
          contentsId: id || '',
        }
        let data = await handRule(params)
        console.log('data', data)
        if (data.code == 200) {
          this.pagination = Object.assign(this.pagination, {
            total: data.result.total,
          })
          this.data = data.result.records
          this.tableLoading = false
        }
      },

      emptsearch () {
        Object.assign(this.new_queryParam, this.$options.data().new_queryParam)
      },

      selectionChange (selection) {
        this.seltTableData = selection
      },

      onSearch () {
        this.pagination.page = 1
        this.getList()
      },
      // 排序 order是降序或者升序 prop是字段
      sortChange ({ order, prop }) {
        this.sort.order_type = {
          ascending: 'asc',
          descending: 'desc',
        }[order]
        this.sort.order_key = prop
        this.pagination.page = 1
        this.getList()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-pagination {
    padding: 2px 5px;
    margin: 15px 0 0 0;
    font-weight: normal;
    text-align: end;
  }

  .tab_box {
    margin: 0px 0 40px 0;
  }

  .df {
    display: flex;
    align-items: center;
  }

  .edit-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-footer {
    position: sticky;
    bottom: 0;
    padding: 0 14px 14px;
    background-color: #fff;
    z-index: 10;
  }
</style>
